import React, { Component, Suspense } from 'react';

function AysncComponent(Component, api) {
    const AysncComponentPromise = () => new Promise(async (resolve) => {
        const data = await api()
        resolve({
            default: (props) => <Component rdata={data} {...props} />
        })
    })
    return React.lazy(AysncComponentPromise)
}

/* 数据模拟 */
const getData = () => {
    return new Promise((resolve) => {
        //模拟异步
        setTimeout(() => {
            resolve({
                name: 'alien',
                say: 'let us learn React!'
            })
        }, 1000)
    })
}
/* 测试异步组件 */
function Test({ rdata, age }) {
    const { name, say } = rdata
    console.log('组件渲染')
    return <div>
        <div> hello , my name is {name} </div>
        <div>age : {age} </div>
        <div> i want to say {say} </div>
    </div>
}

export default class App extends Component {
    LazyTest = AysncComponent(Test, getData)
    render() {
        const { LazyTest } = this
        return (
            <div>
                <Suspense fallback={<h1>Loading...</h1>}>
                    <LazyTest age={18} />
                </Suspense>
            </div>
        )
    }
}
